/**
 * 商品方法显示
 */

import React, { useRef } from 'react'
import { Popup } from '../Popup'
import { View } from '@tarojs/components'
import { LuckyGrid } from '@lucky-canvas/taro/react'

import './index.scss'
import { ButtonEle, ButtonType } from '../Buttton'


export interface ILotteryProps {
    title: string
    vis: boolean
    lucky: any
    onClose: () => void
}
export const Lottery: React.FC<ILotteryProps> = (
    prop
) => {
    const myLuckyRef = useRef();
    const param = JSON.parse(prop.lucky?.param);
    console.log(param, 'param')

    const LuckRender = () => {
        return (
            // <View>11</View>
            <LuckyGrid
              ref={myLuckyRef}
              width='600rpx'
              height='600rpx'
              {...param}
              myLucky
              onStart={() => { // 点击抽奖按钮会触发star回调
                    // 调用抽奖组件的play方法开始游戏
                    myLuckyRef?.current?.play()
                    // 模拟调用接口异步抽奖
                    setTimeout(() => {
                        // 假设后端返回的中奖索引是0
                        const index = 0
                        // 调用stop停止旋转并传递中奖索引
                        myLuckyRef.current?.stop(index)
                    }, 2500)
                }}
              onEnd={prize => { // 抽奖结束会触发end回调
                    console.log(prize)
                }}
            ></LuckyGrid>
        )
    }


    console.log(param, 'param');
    return (
        <Popup
          visible={prop.vis}
          position='center'
          round
          onClose={prop.onClose}
          closeOnClickOverlay
          customStyle={{
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0
            }}
        >
            <View className='xxm-lottery-view-ele'>
                <View className='xxm-lottery-view-ele-luck-wrap'><LuckRender /></View>
                <View className='xxm-lottery-view-ele__footer'>
                    <ButtonEle
                      type={ButtonType.DANGE}
                      block
                      square
                      onClick={() => {
                            console.log('xxxx')
                            prop.onClose()
                        }}
                    >关闭</ButtonEle>
                </View>
            </View>
        </Popup>
    )
}